<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器(层次选择器和属性选择器)</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('#box1 p').css('color','red');// 第1种方法 表示box1下的子子孙孙p元素
            // $('#box1').find('p').css('color','red');//第2种方法 表示box1下的子子孙孙p元素

            // $('#box1>p').css('color','red');//#box1下的子p元素
            // alert(document.querySelectorAll("#box1>p")[1].innerHTML);//box1下的子元素
            // $('#box1').children('p').css('color','red');//box1下的子元素


            // $('#box3+p').css('color','red');//第一种方法 查找某一元素下第一个兄弟节点
            // alert(document.getElementById("box3").nextSibling.innerHTML);//需要去掉回车 要不然显示回车表示box3下的第一个兄弟节点

            // $('#box3').next('p').css('color','red');//第二种方法
            // $('#box3').nextAll('p').css('color','red');//表示box3下所有的兄弟节点
            // $('#box3').next().css('color','red');//next()括号里什么也不写默认是元素的下一个紧挨着的兄弟节点

            // $('#box3').prev('p').css('color','red');//查询某一元素的上一个兄弟节点
            // $('#box3').prevAll('p').css('color','red');//box3上面的所有的兄弟节点

            // $('#box3').siblings('p').css('color','red');//除了box3以外的所有的兄弟节点
            $('#box3').nextUntil('p').css('color','purple');//until直到....为止 表示box3下的兄弟节点到p为止 都显示为紫色
            $('#box3').prevUntil('p').css('color','red');//表示box3上面的兄弟节点直到p为止，都是红色
        });

    </script>
</head>
<body>
    <script>
    /* 选择器
     *   1.层次选择器
     *      一.查询某一元素下面子子孙孙元素
     *           第一种方法  $('#box1 p').css('color','red');
     *           *第二种方法  $('#box1').find('p').css('color','red');
     *      二.表示某一元素下面的子元素
     *          第一种方法 $('#box1>p').css('color','red');
     *          第二种方法$('#box1').children('p').css('color','red');
     *      三.表示某一元素下面的第一个兄弟节点
     *          第一种方法 $('#box3+p').css('color','red');
     *          第二种方法 $('#box3').next('p').css('color','red');
     *   2.属性选择器
    *
    *
    * */
    </script>
<!--    <div id="box1">-->
<!--        <p>p.1</p>-->
<!--        <p>p..1</p>-->
<!--        <p>p...1</p>-->
<!--        <div id="box2">-->
<!--            <p>p2</p>-->
<!--            <p>p2</p>-->
<!--            <p>p2</p>-->
<!--        </div>-->
<!--    </div>-->
<!--    -->

    <strong>strong1</strong>
    <strong>strong1</strong>
    <strong>strong1</strong>
    <p>p1</p>
    <p>p1</p>
    <p>p1</p>
    <strong>strong2</strong>
    <strong>strong2</strong>
    <strong>strong2</strong>

    <div id="box3">我是box3的div</div>
    <strong>strong3</strong>
    <strong>strong3</strong>
    <strong>strong3</strong>
    <p>p...2</p>
    <p>p2</p>
    <p>p2</p>
</body>
</html>